import { h } from 'vue';
import { ElTableColumn } from 'element-plus';
import { definePlugin } from '@/components/@comp/create-component';

export default definePlugin({
  name: 'columnsTransform',
  priority: 'TOOL',
  extendProps: {
    columns: Array,
  },
  useMain(_instance, props) {
    const { columns } = props;

    const columnNodes = columns.map((col) => {
      return h(
        ElTableColumn,
        {
          prop: col.dataIndex,
          label: col.title,
          width: col.width,
          key: col.dataIndex,
        },
        {
          default: (scope) => {
            // console.log(scope, col);
            // if (col.render) {
            //   return h('component', {
            //     is: col.render(scope.row),
            //   });
            // }
            return h('span', scope.row[col.dataIndex] || '-');
          },
        },
      );
    });

    return {
      columnNodes,
    };
  },
});
